<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加出行人</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../../../script/widget/mobiscroll/mobiscroll.custom-3.0.0-beta6.min.css" />
    <link rel="stylesheet" href="../../../css/my/frequenter/add.css" />
    <link type="stylesheet" src="../../../script/extend/parsley/src/parsley.css" />
</head>

<body style="cursor: pointer;">

    <ul class="aui-list aui-form-list" style="position:static;">
        <form id="myform" data-parsley-trigger="blur" role="form" action="#" method="POST" data-parsley-validate>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        真实姓名
                    </div>
                    <div class="aui-list-item-input">
                        <input class="font-size-7" id="userName" type="text" placeholder="不超过10个汉字" data-parsley-required="true" data-parsley-errors-container="#err" data-parsley-pattern="^[\u2E80-\u9FFF]+$" data-parsley-pattern-message="只能输入汉字姓名" data-parsley-maxlength="10"
                            data-parsley-minlength-message="最多只能输入十个字符">
                    </div>
                    <div class="aui-list-item-label-icon" onclick="explain()">
                        <i class="aui-iconfont aui-icon-question" style="color:#ffbb43"></i>
                    </div>
                </div>
            </li>

            <li>
                <span id="err" style="color:#FF0000;text-indent:1em"></span>
            </li>

            <li class="aui-list-item aui-margin-t-15">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        出生日期
                    </div>
                    <div class="aui-list-item-input">
                        <input id="scroller" class="font-size-7" type="text" placeholder="请填写出生年月日" disabled>
                    </div>
                </div>
            </li>

            <li class="aui-list-item aui-margin-t-15" onclick="add_certificate()">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">添加证件</div>
                    <div class="aui-list-item-input">
                        <input class="font-size-7" id="papers" type="text" placeholder="请添加有效证件" disabled value="">
                        <input class="font-size-7" id="card_type" type="hidden" name="card_type" value="">
                    </div>
                    <div class="aui-list-item-label-icon"><i class="aui-iconfont aui-icon-right"></i></div>
                </div>
            </li>

            <li class="aui-list-item aui-margin-t-15">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">手机号码</div>
                    <div class="aui-list-item-input">
                        <input id="mobile" class="font-size-7" type="text" name="mobile" placeholder="请填写手机号码" data-parsley-required="true" data-parsley-errors-container="#err1" placeholder="请输入手机号码" data-parsley-pattern="^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$"
                            data-parsley-pattern-message="请输入正确的手机号码">
                    </div>
                </div>
            </li>

            <li>
                <span id="err1" style="color:#FF0000;text-indent:1em"></span>
            </li>
            <div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm submit" style="margin:1.5rem auto;width:50%;background:#3cb0d6;" onclick="travel_add()">完成</div>
        </form>
    </ul>

</body>

</html>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-dialog.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../../script/widget/mobiscroll/mobiscroll.custom-3.0.0-beta6.min.js"></script>
<script type="text/javascript" src="../../../script/extend/parsley/dist/parsley.remote.min.js"></script>
<script type="text/javascript" src="../../../script/extend/parsley/src/i18n/zh_cn.js"></script>
<script type="text/javascript" src="../../../script/extend/sort.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>

<script type="text/javascript">
    var card_type, card_number;
    apiready = function() {
        api.parseTapmode();
        //接收监听证件类型和证件号码
        api.addEventListener({
            name: 'addCard'
        }, function(ret, err) {
            card_type = ret.value.card_type;
            card_number = ret.value.card_number;
            $('#papers').val(card_number);
            $('#card_type').val(card_type);
        });
        var cookie = document.cookie.indexOf("name=");
        if (cookie != -1) {
            $("#userName").val(getCookie("name"));
            $("#scroller").val(getCookie("date"));
            $("#papers").val(getCookie("papers"));
            $('#card_type').val(getCookie("card_type"));
        }
    };

    function travel_add() {

        var userName = $("#userName").val();
        var scroller = $("#scroller").val();
        var papers = $("#papers").val();
        var mobile = $('#mobile').val();
        var card_type = $('#card_type').val();

        var param = {};
        param.url = Config.common.addTravelers;
        param.data = {
            name: userName,
            mobile: mobile,
            card_type: card_type,
            card_number: papers,
            birthday: scroller
        };
        ajax(param, function(data) {
            if (data.code == 1) {
                //发送监听
                api.sendEvent({
          				name: 'travelList',
          				extra: {
          					submit : 1
          				}
          			});
                clearAllCookie();
                //跳转页面
                api.closeWin({});

            } else {
                alert(data.msg);
            }
        })
    }
    $('#scroller').mobiscroll().date({
        theme: 'mobiscroll',
        lang: 'zh',
        dateFormat: 'yyyy-mm-dd',
        display: 'center',
        mode: 'Basic usage date'
    });

    function explain() {
        var dialog = new auiDialog({});
        var msg = "1.请优先使用中文姓名。";
        dialog.alert({
            title: "姓名填写说明",
            msg: msg
        }, function(ret) {

        })
    }

    function add_certificate() {
        var userName = $("#userName").val();
        var scroller = $("#scroller").val();
        setCookie("name", userName);
        setCookie("date", scroller);
        openWin('add_certificate', './add_certificate_win.html');
    }



    // 设置一个cookie
    function setCookie(name, value) {
        document.cookie = name + "=" + value;
    }
    //获取cookie
    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    }
    //删除cookie
    function delCookie(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = getCookie(name);
        if (cval != null)
            document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    }

    //清除所有的cookie
    function clearAllCookie() {
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        if (keys) {
            for (var i = keys.length; i--;)
                document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
        }
    }
</script>
